<template>
  <div @click="close">
    <div :class="classStr">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'scale',
    },
  },
  created() {
    this.classStr = `${this.name} ${this.name}-on2 ${this.name}-on3`
  },
  data() {
    return {
      classStr: '',
    }
  },
  methods: {
    close() {
      this.classStr = `${this.name} ${this.name}-on1`
      setTimeout(() => {
        this.$emit('close')
      }, 300)
    },
  },
}
</script>

<style scoped lang="scss">
.slideUp {
  transition: all 0.3s linear;
}
@keyframes slideUp {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.slideUp-on1 {
  transform: translateY(100vh);
  opacity: 0;
}
.slideUp-on2 {
  transform: translateY(0);
  opacity: 1;
}
.slideUp-on3 {
  animation: slideUp 0.3s linear;
}

.scale {
  transition: all 0.3s linear;
}
@keyframes scaleA {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.scale-on1 {
  transform: scale(0.5);
  opacity: 0;
}
.scale-on2 {
  transform: scale(1);
  opacity: 1;
}
.scale-on3 {
  animation: scaleA 0.3s linear;
}
</style>
